<template>
  <div>
    <div class="navbar" h-80rpx leading-80rpx text-center flex font-semibold text-28rpx px-36rpx>
      <div style="width: 40%;">商品名称</div>
      <div style="width: 15%;">数量</div>
      <div style="width: 25%;">佣金金额</div>
      <div style="width: 20%;">状态</div>
    </div>
    <div p-16rpx box-border>
      <scroll-view :scroll-top="scrollTop" @scrolltolower="reachBottom"
        :lower-threshold="100" scroll-with-animation :style="{ height: 'calc(100vh - 80rpx - 120rpx)' }"
        :scroll-y="true">
        <div v-if="isShow">
          <div v-if="orderList.records.length">
            <div :key="index" v-for="(item, index) in orderList.records" mb-20rpx class="order-list" bg-white py-16rpx rounded>
              <div class="order-sn" indent-4 text-26rpx text-neutral-400>下单时间：{{item.createTime}}</div>
              <div class="order-detail" leading-60rpx text-center flex text-28rpx px-20rpx>
              	<div style="width: 40%;text-align: left;">{{item.goodsName}}</div>
              	<div style="width: 15%;">{{item.num}}</div>
              	<div style="width: 25%;">{{unitPrice(item.rebate, '￥')}}</div>
              	<div style="width: 20%;">
              		<span v-if="item.distributionOrderStatus == 'NO_COMPLETED'">未完成</span>
              		<span v-else-if="item.distributionOrderStatus == 'COMPLETE'">订单完成</span>
              		<span v-else-if="item.distributionOrderStatus == 'CANCEL'">订单取消</span>
              		<span v-else-if="item.distributionOrderStatus == 'REFUND'">订单退款</span>
              	</div>
              </div>
            </div>
          </div>
          <empty v-if="!orderList.records.length" />
        </div>
      </scroll-view>
    </div>
  </div>
</template>

<script setup lang="ts">
import empty from '@/components/empty/index.vue';
import { onLoad } from '@dcloudio/uni-app';
import { unitPrice } from '@/utils/filters';
import { distributionOrders } from "@/api/goods";
const scrollTop = ref<number>(0) //scroll 为0 回到顶部
const isShow = ref<boolean>(false) //是否展示内容
const routerVal = ref<any>({})
const searchForm = ref<any>({
  pageNumber: 1,
  pageSize: 10,
  sort: "createTime",
  order: "desc",
})
const orderList = ref<any>({
  records: [],
  total: 0
})

// 触底加载
function reachBottom() {
  if (searchForm.value.pageSize * searchForm.value.pageNumber < orderList.value.total) {
    searchForm.value.pageNumber++
    fetch()
  }
}

function init() {
  isShow.value = false
  orderList.value.records = []
  searchForm.value.pageSize = 10
  searchForm.value.pageNumber = 1
  fetch()
}

async function fetch() {
  const res = await distributionOrders(searchForm.value)
  isShow.value = true
  if (res.data.success) {
    orderList.value.records.push(...res.data.result.records)
    orderList.value.total = res.data.result.total
  }
}

onLoad((options: any) => {
  routerVal.value = options
})

onMounted(() => {
  init()
})
</script>


<style scoped lang="scss">

.navbar {
  box-shadow: 6rpx 10rpx 24rpx rgba(126, 126, 126, 0.1);
}


.order-list {
	.order-sn {
		height: 60rpx;
    line-height: 50rpx;
		border-bottom: 2rpx solid #f1f2f3;
	}
}
</style>

